<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="assets/images/favicon.ico" rel="icon">
    <title>经济普查地理信息系统</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="assets/module/admin.css?v=313" />
    <link rel="stylesheet" href="assets/css/index_config.css">
    <!--[if lt IE 9]>
    <script src="assets/libs/html5shiv.min.js"></script>
    <script src="assets/libs/respond.min.js"></script>
    <![endif]-->
    <script src="assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="assets/js/cryptojs/crypto-js.js"></script>
    <script src="assets/libs/axios.min.js"></script>
    <script src="assets/js/config.js"></script>
    <script src="assets/js/authority.js"></script>
	<style>
		body{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			padding: 0;
		}
		iframe#main{
			min-height:900px;
			width:100%;
			height:calc(100vh - 50px);
		}
	</style>

</head>

<body>
    <div class="portal-header">
        <div class="portal-logo">
            <img src="assets/images/logo.png" alt="">
            <p>四川省统计地理信息系统</p>
        </div>
        <div class="portal-user">
            <div class="portal-ul" id="portal_nav">

            </div>
            <div class="portal-userInfo">
                <p>欢迎用户：</p>
                <p id="user_name">---</p>
                <span id="loginOut">注销</span>
            </div>
        </div>
    </div>
    <div class="portal-space"></div>
    <!--渲染可视化展示-->
    <script type="text/tmpl" id="template-nav-tmpl">
        {{each data}}
            <div data-id="{{$value.id}}" class="portal-li">
                <p>{{$value.name}}</p>
            </div>
        {{/each}}
    </script>
    <div class="container">
        <iframe src="" id="main" name="main" frameborder="0" ></iframe>
    </div>
    <!-- 加载动画 -->
    <div class="page-loading">
        <div class="ball-loader">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>
    <div id="load-iframe">
        <div class="ball-loader">
            <span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!-- js部分 -->

    <script type="text/javascript" src="assets/libs/layui/layui.js"></script>
    <script type="text/javascript" src="assets/js/common.js?v=313"></script>
    <script type="text/javascript" src="./assets/js/authority.js"></script>
    <script src="./assets/libs/template-web.js"></script>
    <script>
        layui.use(['layer', 'element', 'admin', 'index', 'laytpl', 'element'], function () {
            var $ = layui.jquery;
            var userInfo = getAuthority();
            userInfo = JSON.parse(userInfo)
            var Authorization;//请求接口用
            //获取权限方法
            if (userInfo) {
                var access_token = localStorage.getExpire("access_token");
                var token_type = localStorage.getExpire("token_type");
                Authorization = token_type + " " + access_token;
                getnavSystem();
                var name = userInfo.sysUser.nickname;
                if(name === null || name === "null" || name === ""){
                    name = userInfo.sysUser.username;
                }
                $('#user_name').html(name)
                $('.portal-logo').click(function () {
                    location.href = webBaseUrl + '/index.html';
                })

            }
            //获取系统信息
            function getnavSystem() {
                let req = {
                    type: 2
                }
                axios.get(portal_system.userSystem, {
                    params: req,
                    headers: {
                        'Authorization': Authorization
                    }
                })
                    .then(function (response) {
                        if (response.status == 200 && response.data.message == "success") {
                            var data = response.data.data;
                            var nav_str = template("template-nav-tmpl", { data });
                            document.getElementById("portal_nav").innerHTML = nav_str;
                            $('.portal-li').each(function (index, item) {
                                let systemId = localStorage.getItem('system_id')
                                let check_system = $(item).attr('data-id');
                                if (check_system == systemId) {
                                    for(let i = 0;i<data.length;i++){
                                        if(systemId == data[i].id){
                                            $(item).addClass('checkSystem')
                                            $(this).prev().find('p').addClass('portal-ul-style')
//                                            data[i].url = "http://localhost:63342/one-map-web/index.html"
                                            getPage(data[i].url,data[i].openType)
                                        }
                                    }

                                }
                            })
                            $('.portal-li').click(function () {
                                let system_id = $(this).attr('data-id');
                                localStorage.setItem('system_id', system_id)
                                for(let i = 0;i<data.length;i++){
                                    if(system_id == data[i].id){
                                        $(this).siblings().find('p').removeClass('portal-ul-style')
                                        $(this).prev().find('p').addClass('portal-ul-style')
                                        $(this).addClass('checkSystem').siblings().removeClass('checkSystem')
                                        getPage(data[i].url,data[i].openType)
                                    }
                                }
                            })
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                        if(error.response.status === 401 || error.response.status === 403 || error.response.status === 406){
                            // 进行重新登陆
                            localStorage.clear();
                            top.location.href=loginPageUrl;
                        }
                    });
            }
			function getPage(pageUrl,openType) {
                var ifr = document.getElementById('main')
                if(pageUrl){
                    //根据ID获取iframe对象
                    var url = pageUrl+"?"+localStorage.getExpire("access_token")
                    var name = JSON.parse(localStorage.getExpire("userInfo")).sysUser.username;
                    if(openType == '1'){
                        url += "&username=" + name;
                        window.open(url)
                        return false
                    }else {
                        if(ifr.src!=url){
                            document.getElementById("load-iframe").style.display = "block";
                            ifr.src = url;
                        }
                    }
                }else{
                    var url = webBaseUrl+"/page/error/error-404.html"
                    ifr.src = url;
                    document.getElementById("load-iframe").style.display = "block"
                }
            }

            //根据ID获取iframe对象
            var ifr = document.getElementById('main')
            ifr.onload = function () {
                document.getElementById("load-iframe").style.display = "none"
                //解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
                ifr.style.height = '0px';
                var iDoc = ifr.contentDocument || ifr.document
                if(iDoc){

                    var height = calcPageHeight(iDoc)
                    if (height < 850) {
                        height = 850;
                    }
                    ifr.style.height = height + 'px';
                }
            }
        });
        // 计算页面的实际高度，iframe自适应会用到
        function calcPageHeight(doc) {
            var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
            var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
            var height = Math.max(cHeight, sHeight)
            return height
        }

    </script>
</body>

</html>
